import React, { Component } from 'react';
import BaseHeader from '@/components/base/baseHeader';
import GlobalBottom from '@/components/base/GlobalBottom';
import { Switch, Route, Redirect } from 'react-router-dom';
import Defaultcollect from './child/Defaultcollect';
import Autorcollect from './child/Autorcollect';
import Gujicollect from './child/Gujicollect';
import Mingjucollect from './child/Mingjucollect';
import $ from 'jquery';
import './collect.scss';
class Com extends Component {
    constructor (props) {
      super(props)
      this.state = {
        islogin:'请登录'
      }
    }
    qiehuan (event) {
      var collectcurrent = event.currentTarget;
      $(collectcurrent).children().addClass("hover").end().siblings().children().removeClass('hover');
    }
    logout () {
      localStorage.setItem('isok','no');
      localStorage.removeItem('uid');
      this.props.history.push('/login') ;
    }
  
    render () {
      // console.log(localStorage.getItem('isok') === 'ok')
      if(localStorage.getItem('isok') === 'no'){
        // console.log("issssss");
        this.props.history.push('/login') ;
      }
      return (
        <div className = "container">
          <BaseHeader />
            <div className="collectcontainer">
              <div className="mycollect">
                <div className="mycollectleft">
                  <span className="mycollecttitle">我的收藏</span>
                  <div className="collectsort">
                    <span style={{width:'auto',height:'16px',display:'inline-block',marginTop:'15px',fontSize:'12px'}}>时间排序</span>
                    <span style={{width:'auto',height:'16px',display:'inline-block',merginTop:'15px',fontSize:'12px',marginLeft:'5px',marginRight:'5px'}}>/</span>
                    <span style={{width:'auto',height:'16px',display:'inline-block',merginTop:'15px',fontSize:'12px'}}>字母排序</span>
                  </div>
                </div>
                <div className="mycollectright">
                  账号管理
                </div>
              </div>
              <div className="collectsearch">
                <div className="collectrouter">
                  <ul className="collectsearchleft">
                    <li className="collectsearchleft1" onClick={this.qiehuan.bind(this)}><a href="#/collect/default" className="hover">诗文</a></li>
                    <li className="collectsearchleft1" onClick={this.qiehuan.bind(this)}><a href="#/collect/mingjucollect">名句</a></li>
                    <li className="collectsearchleft1" onClick={this.qiehuan.bind(this)}><a href="#/collect/autorcollect">作者</a></li>
                    <li className="collectsearchleft1" onClick={this.qiehuan.bind(this)}><a href="#/collect/gujicollect">古籍</a></li>
                  </ul>
                  <div className="collectsearchmiddles" style={{marginTop:'20px',minHeight:'440px'}}>
                    <Switch>
                      <Route path="/collect/default" component={ Defaultcollect } />
                      <Route path="/collect/autorcollect" component={ Autorcollect } />
                      <Route path="/collect/gujicollect" component={ Gujicollect } />
                      <Route path="/collect/mingjucollect" component={ Mingjucollect } />
                      <Redirect from = '/collect' to="/collect/default" />
                    </Switch>
                  </div>
                </div>
                <div className="collectsearchright">
                  <span className="collectupdatenick">修改昵称</span>
                  <span className="collectupdatepassword">修改密码</span>
                  <span className="collectupdatelogin" onClick={this.logout.bind(this)}>{this.state.islogin}</span>
                </div>
              </div>
            </div>
          <GlobalBottom />
        </div>
      )
    }
  }
  
  export default Com;